<!--
 * @Author: your name
 * @Date: 2020-08-25 17:56:09
 * @LastEditTime: 2020-08-27 10:43:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ryfront\src\modules\roles\User.vue
-->
<!-- 角色关联用户 -->
<template>
    <div>
        <el-row>
            <!--查询用户列表-->
            <el-col :span="24">
                <div style="display:none;background-color:#66b1ff;color: #ffffff;height:40px;font-size: 18px;line-height: 40px;margin:1px 1px;;"><p>&nbsp;&nbsp;选择用户</p></div>
                <div>
                    <el-input size="small"  v-model="searchUser" placeholder="请输入用户账号"  >
                        <el-button slot="append" icon="el-icon-search" @click="findUser" ></el-button>
                    </el-input>
                </div>
                <!-- 展示搜索后的用户，参考右模糊搜索 -->
                <div style="margin: 0 auto;margin-top:10px;padding-bottom: 10px;">
                    <el-transfer v-model="selUserList" :data="userList"></el-transfer>
                </div>

                <el-row justify="center" >
                    <el-col :span="24" >
                        <el-button size="small" type="primary" @click="confirm" >确认</el-button>
                        <el-button size="small" @click="closeDialog" >取消</el-button>
                    </el-col>
                </el-row>
                
            </el-col>
           
        </el-row>
    </div>
</template>

<script>
    import {userListByAccount,roleUserByRoleId,roleUserAdds} from '@/api/index';
    export default{
        name: 'role-res',
        props:{
            roleId:{
                type: String,
                default: ''
            }
        },
        data() {
            return {
                userList:[],//用户列表
                selUserList:[],//选中的用户列表
                searchUser:'',//当前搜索的用户号信息
            }
        },
        mounted() {
            this.getRoleUserById();
        },
        methods: {
            getRoleUserById(){
                roleUserByRoleId(this.roleId).then((result) => {
                    if(result.status == 200){
                        let list = result.data.data;
                        for(let i=0; i< list.length; i++){
                            this.userList.push({key:list[i].userId,label:list[i].userAccount});
                            this.selUserList.push(list[i].userId);
                        }
                        console.log(this.selUserList);
                    }
                })
            },
            findUser(){
                if(this.searchUser.trim() != ""){
                    //不删除原来搜索的
                    userListByAccount(this.searchUser).then((result) => {
                        if(result.status == 200){
                           let list = result.data.data;
                           for(let i=0; i< list.length; i++){
                               this.userList.push({key:list[i].userId,label:list[i].userAccount});
                           }
                        }
                    })
                }
            },
            closeDialog(){
                this.$emit("closeDialog","user");
            },
            //添加关联用户
            confirm(){
                
                roleUserAdds(this.roleId,this.selUserList).then((result) => {
                    if(result.status == 200){
                        this.$message({
                            type:'success',
                            message:'批量操作成功',
                        });
                        this.closeDialog();
                    }
                })
            }
        },
        watch: {
            roleId:function(oval,nval){
                //执行查询当前角色所拥有的用户
            }
        },
    }
</script>

<style scoped>

</style>